<template>
  <div class="main">
    <header class="m-l-15">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
        <div class="flex m-t-20">
          <div>
            <el-form-item label="医院" prop="hosp">
              <el-select v-model="queryParams.hosp" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="m-r-20">
            <el-form-item label="问卷" prop="test">
              <el-select v-model="queryParams.test" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="选择日期" prop="docName">
              <el-date-picker v-model="queryParams.date" type="datetimerange" :picker-options="pickerOptions" range-separator="至"
                start-placeholder="开始日期" end-placeholder="结束日期" align="right">
              </el-date-picker>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <article class="flex row-around m-t-20">
        <div  class="flex border" v-for="n in 4">
          <div class="p-l-10"><img :src="logo" width="45" alt=""></div>
          <div class="flex-col p-t-10 p-r-20 ">
            <div>今日提交量</div>
            <div>124,345</div>
            <div>环比上周</div>
          </div>
        </div>
      </article>
    </header>
    <main class="m-l-15">
      
    </main>
  </div>
</template>

<script>

export default {
  name: '',
  data() {
    return {
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
      queryParams: {
        hosp:'',
        test:'',
        date:''
      },
      logo:require('@/assets/img/top_logo.png')
    }
  },
  created() { },
  methods: {

  },

}
</script>

<style lang='scss' scoped>
.main {}
</style>